import React, { Component } from 'react';
import { connect } from 'react-redux'
import { save,fetch as productFetch } from '../../redux/product.redux'
import { fetch as catalogFetch } from '../../redux/catalog.redux'
import { Form,Input,Row,Col, Button,Icon,Cascader,InputNumber,Switch } from 'antd'

@connect(state=>state, {save,catalogFetch,productFetch})
class ProductForm extends Component {

    state={
        product:null,
        packages:null
    }

    componentDidMount() {
        this.props.catalogFetch()
        const productData = this.props.product.data
        if (productData.length==0 && this.props.match.params.id > 0) {
            this.props.productFetch()
        }
    }

    productChange=(name, value)=>{
        this.setState({product:{...this.state.product, [name]:value}})
    }

    productCatalogChange=(value)=>{
        console.log(value)
    }

    packageChange=(index, name, value)=>{
        this.setState({packages:this.state.packages.map((v,i)=>index==i?{...v, [name]:value}:v)})
    }

    addPackage=()=>{
        this.setState({packages:[...this.state.packages, {status:1}]})
    }

    removePackage=(index)=>{
        this.setState({packages:this.state.packages.filter((v,i)=>index!=i)})
    }

    formSubmit=()=>{
        let params = []
        for(let i =0; i< this.state.packages.length; i++) {
            params.push({
                packageName:this.state.packages[i].packageName,
                price:this.state.packages[i].price,
                count:this.state.packages[i].count,
                status:this.state.packages[i].status,
            })
        }
        this.props.save({product:this.state.product, packages:params})
    }

    getTreeNode=(data=this.props.catalog.data, node={number:''})=>{
        let childs = data.filter(v=>v.parent==node.number).map(v=>{
            let mchilds = this.getTreeNode(data, v)
            return mchilds ? {value:v.number, label:v.name, 'children':mchilds} : {value:v.number, label:v.name}
        })
        return childs
    }

    getCatalogParent=(number, data=this.props.catalog.data)=>{
        let res = [];
        let current = data.find(v=>v.number==number)
        while(current) {
            res.unshift(current.number)
            current = data.find(v=>v.number==current.parent)
        } 
        return res
    }

    render() {
        if (!this.state.product && !this.state.packages) {
            if (this.props.match.params.id > 0) {
                const productData = this.props.product.data
                if (productData.length > 0) {
                    const proId = this.props.match.params.id
                    const data =  productData.filter(v=>v.proId==proId)
                    const packages =data.map(v=>{return {packageName:v.packageName,price:v.packagePrice,count:v.count,status:v.status}})
                    const product = {
                        pro_id:data[0].proId,
                        number:data[0].number,
                        name:data[0].proName,
                        barcode:data[0].barcode,
                        unit:data[0].unit,
                        catalog_num:data[0].catalog_num,
                        brand_price:data[0].brand_price,
                        sort:data[0].sort,
                        agency:data[0].agency
                    }
                    this.setState({packages,product})
                }
            } else {
                this.setState({packages:[],product:{}})
            }
        }
        if (!this.state.product || !this.state.packages) {
            return null
        }
        return (
            <div>
                <Form layout="horizontal">
                    <Form.Item label="商品名称" labelCol={{span:4}} wrapperCol={{span:16}}>
                        <Input value={this.state.product.name} onChange={(v)=>this.productChange('name', v.target.value)} />
                    </Form.Item>
                    <Form.Item label="商品编号" labelCol={{span:4}} wrapperCol={{span:16}}>
                        <Input value={this.state.product.number} onChange={(v)=>this.productChange('number', v.target.value)} />
                    </Form.Item>
                    <Form.Item label="条形码" labelCol={{span:4}} wrapperCol={{span:16}}>
                        <Input value={this.state.product.barcode} onChange={(v)=>this.productChange('barcode', v.target.value)} />
                    </Form.Item>
                    <Form.Item label="单位" labelCol={{span:4}} wrapperCol={{span:5}}>
                        <Input value={this.state.product.unit} onChange={(v)=>this.productChange('unit', v.target.value)} />
                    </Form.Item>
                    <Form.Item label="类型" labelCol={{span:4}} wrapperCol={{span:10}}>
                        <Cascader options={this.getTreeNode()} 
                        placeholder="选择商品类型"
                        value={this.getCatalogParent(this.state.product.catalog_num)}
                        onChange={(value)=>this.productChange('catalog_num', value[value.length-1])} />
                    </Form.Item>
                    <Form.Item label="品牌价格" labelCol={{span:4}} wrapperCol={{span:5}}>
                        <InputNumber value={this.state.product.brand_price} style={{width:'100%'}}
                         formatter={value=>`￥${value}`}
                         max={10000000}
                         min={0}
                         onChange={(v)=>this.productChange('brand_price', v)} />
                    </Form.Item>
                    <Form.Item label="终端排序" labelCol={{span:4}} wrapperCol={{span:4}}>
                        <InputNumber max={1000} min={0} value={this.state.product.sort} onChange={(v)=>this.productChange('sort', v)} />
                    </Form.Item>
                    <Form.Item label="机构" labelCol={{span:4}} wrapperCol={{span:10}}>
                        <Input value={this.state.product.agency} onChange={(v)=>this.productChange('agency', v.target.value)} />
                    </Form.Item>
                    <Form.Item label="规格" labelCol={{span:4}} wrapperCol={{span:16}}>
                        <Row gutter={24}>
                            <Col span={6}>规格名称</Col>
                            <Col span={6}>价格</Col>
                            <Col span={6}>库存</Col>
                            <Col span={4}>状态</Col>
                            <Col span={2}><Button type="primary" shape="circle" size="small" icon="plus" ghost onClick={this.addPackage} /></Col>
                        </Row>
                            {this.state.packages.map((v,index)=>(
                                <Row key={index} gutter={24}>
                                    <Col span={6}><Input value={v.packageName} onChange={(e)=>this.packageChange(index,'packageName', e.target.value)} /></Col>
                                    <Col span={6}>
                                        <InputNumber value={v.price} style={{width:'100%'}}
                                        formatter={value=>`￥${value}`}
                                        max={10000000}
                                        min={0}
                                        onChange={(v)=>this.packageChange(index,'price', v)} />
                                    </Col>
                                    <Col span={6}>
                                        <InputNumber value={v.count} style={{width:'100%'}}
                                        formatter={value=>`${this.state.product.unit?this.state.product.unit:'个'} ${value}`}
                                        max={10000000}
                                        min={0}
                                        onChange={(v)=>this.packageChange(index,'count', v)} />
                                    </Col>
                                    <Col span={4}><Switch defaultChecked={v.status==1} onChange={(e)=>this.packageChange(index,'status', e?1:2)} /></Col>
                                    <Col span={2}><Button onClick={()=>this.removePackage(index)} type="danger" shape="circle" size="small" icon="minus" ghost/></Col>
                                </Row>
                            ))}
                        
                    </Form.Item>
                    <Form.Item wrapperCol={{span:8,offset:8}}>
                        <Button style={{marginRight:20}} onClick={()=>{this.props.history.goBack()}}>取消</Button>
                        <Button type="primary" onClick={this.formSubmit}>保存</Button>
                    </Form.Item>
                </Form>
            </div>
        )
    }
}

export default ProductForm